<template>
	<view class="wanl-page wanlshop-container flex flex-direction" style="height: 100%;">
		<!-- 导航条 -->
		<!-- <view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333'
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}"> 选择时间 </view>
				<view class="action">
					<text @tap="$wanlshop.backHome()" class="iconfont icon-ipr_shouye" style="color: #333;font-size: 40rpx;font-weight: bold;"></text>
				</view>
			</view>
		</view> -->
		<wanl-calendar :top="$wanlshop.wanlsys().height + 'px'" @getDay="getDay" class="margin-tb-xs"></wanl-calendar>
		<view class="flex-sub time padding-lr padding-tb-sm bg-white margin-bottom">
			<text :class="{cur:cur == index}" @tap="chooseTime(item,index,diff(item))" v-for="(item,index) in list" :key="index" :style="{color:!diff(item) ? '#ccc' : ''}">{{item}}</text>
		</view>
		
		<view class="safeAreaBottom"></view>
		<!-- 底部 -->
		<view class="btn flex justify-center align-center wanlian cu-bar foot">
			<view class="lightning flex justify-center align-center" @tap="submit">
				<text>确定选择</text>
			</view>
		</view>
		
		<view style="width: 0;height: 0;font-size: 0;">{{currentTime}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cur: 0,
				list: {},
				currentTime:'',
				timer:null,
				date: this.$moment().format('YYYY-MM-DD')
			};
		},
		onLoad(option) {
			this.loadData()
		},
		onNavigationBarButtonTap(e) {
			this.$wanlshop.backHome()
		},
		onShow() {
			this.timer = setInterval(()=>{
				this.currentTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
			},1000)
		},
		onHide() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			getDay(date) {
				this.date = date;
			},
			diff(time1) {
				time1 = `${this.$moment().format(this.date)} ${time1}:00`;
				let time2 = this.$moment().format('YYYY-MM-DD HH:mm:ss')
				// 使用 Moment.js 比较两个时间字符串
				let moment1 = this.$moment(time1)
				let moment2 = this.$moment(time2)
				let diff = moment1.diff(moment2)
				if (diff < 0) {
					return false;
				} else if (diff > 0) {
					return true;
				} else {
					return false;
				}
			},
			chooseTime(item,index,flag) {
				if(!flag) {
					this.$wanlshop.msg('选择的时间不能比当前时间小')
				}else{
					this.cur = index
					this.time = item
				}
			},
			submit() {
				if(!this.time) {
					this.$wanlshop.msg('请选择时间')
				} else {
					this.$wanlshop.prePage().setData(this.date,this.time,`${this.date} ${this.time}:00`,Number(this.cur));
					this.$wanlshop.back(1);
				}
			},
			async loadData() {
				await uni.request({
					url: `/publics/commons/timeSlot`,
					method: 'POST',
					success: res => {
						let data = res.res;
						if(data.code == 1) {
							this.list = data.data
						}
					}
				});
			}
		}
	};
</script>


<style lang="scss">
	page {
		background-color: #ededed;
		height: 100%;
	}
	.cu-custom {
		background-color: #fff;
		.cu-bar {
			z-index: 99;
			background-color: #fff;
		}
	}
	.btn {
		.lightning {
			width: 384rpx;
			height: 72rpx;
			background: #4CBD66;
			border-radius: 10rpx;
			text {
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	.wanlian,.safeAreaBottom {
		height: calc(128rpx + env(safe-area-inset-bottom)) !important;
	}
	.wanlian {
		background-color: #fff !important;
	}
	.time {
		text {
			display: inline-block;
			width: calc((100% - 48rpx) / 4);
			height: 76rpx;
			background: #F4F4F4;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			text-align: center;
			line-height: 76rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #666666;
			&:nth-child(4n) {
				margin-right: 0;
			}
			&.cur {
				color: #4CBD66;
				background-color: #E9F4EB;
			}
		}
	}
</style>